{% extends base %}
{% load i18n %}
{% block meta %}
    {{ block.super }}
	<meta property="fb:app_id" content="{{ settings.FB_APP_ID}}" />
	<meta property="og:site_name" content="{% trans 'Open Alive' %}"/>
{% endblock %}
{% block content %}
      <div class="row-fluid">
        <div id="sidebar" class="span3">
          <ul class="breadcrumb">
            <li><a href="#!/" class="home-link"><i class="icon-home icon-blue"></i>{% trans 'Home' %}</a> <span class="divider" style="display:none">/</span></li>
          </ul>
          {% if user %}
          <div id="starred-wrapper">
	        <h5><i class="icon-bookmark"></i> {% trans 'Starred Categories' %}</h5>
	        <nav id="starred"></nav>
	      </div>
	      {% endif %}
	      <div id="category-explorer-wrapper">
	        <h5><i class="icon-th-list"></i> {% trans 'Category Explorer' %}</h5>
	        <nav id="category-explorer" class="well category-explorer-nav">
	          <ul class="nav nav-list"><li class="loading"><i class="icon-time"></i> {% trans 'Loading...' %}</li></ul>
	        </nav><!--/.well -->
	      </div>
	      <div id="notification-info" class="alert alert-block">
            <a class="close" data-dismiss="alert">×</a>
	        {% trans 'Add following address to your Google Talk(Chat) contact if you want to receive notifications when you got update on your/followed articles.' %}<br><br>
	        <p><a href="gtalk:chat?jid={{ app.get_application_id }}@appspot.com"><code><i class="icon-leaf"></i>{{ app.get_application_id }}@appspot.com</code></a></p> 
	      </div>
        </div><!--/span-->
        <div id="content" class="span9">
	        {% if not user %}
	        <div class="alert alert-info">
	            <a class="close" data-dismiss="alert">×</a>
	            {% blocktrans %}<strong>Heads up!</strong> To post something, you have to <a href="{{ login_url }}" class="login-url">login</a>{% endblocktrans %}.
	        </div>
	        {% endif %}
        
          <article id="article-item">
            <header class="page-header">
              	<div id="article-item-meta" class="well">
              		<div id="article-item-author-avatar"></div>
              		<div id="article-item-author-nickname"></div>
	              	<div id="article-item-created"><i class="icon-pencil"></i> <time title="{% trans 'Written Date' %}"></time></div>
	              	<div id="article-item-last-updated"><i class="icon-edit"></i> <time title="{% trans 'Last Modified' %}"></time></div>              		
              	</div>            
              	<h2 id="article-item-title" itemprop="name"></h2>
            </header>
          	<p id="article-item-body" itemprop="description"></p>
          	<ul id="article-item-tags"></ul>
          	<hr>
          </article>
          <div id="article-reputation">
          	  <div>
	          	  <span id="fb-like"><fb:like send="true" layout="button_count" show_faces="false"></fb:like></span>
	          	  <span id="g-plusone"><div class="g-plusone" data-size="medium"></div></span>
				  <span id="twttr-share"><a href="https://twitter.com/share" class="twitter-share-button" data-via="openalive">Tweet</a></span>
			  </div>
	          <div id="likes-wrapper"><i class="icon-thumbs-up"></i><span id="likes"></span></div>
	          <div id="hates-wrapper"><i class="icon-thumbs-down"></i><span id="hates"></span></div>
	          <ul id="best-comments"></ul>          
	          <ul id="comments">
	          	<li id="comment-load-more" class="load-more"><button id="btn-comment-load" class="btn btn-full" data-loading-text="{% trans 'loading...' %}" data-complete-text="{% trans 'Show Previous' %}">{% trans 'Show Previous' %}</button></li>
	          	{% if user %}
	          	<li id="comment-input"><textarea rows="1" id="post-comment" placeholder="{% trans 'Write a comment' %}"></textarea></li>
	          	{% endif %}
	          </ul>
          </div>
          <div id="article-btns">
          	<div id="btn-group-misc-article">
          		<button id="btn-list-article" class="btn btn-read"><i class="icon-list"></i> {% trans 'List' %}</button>
          		{% if user %}
          		<button id="btn-like-article" class="btn btn-reputation btn-read"><i class="icon-thumbs-up"></i> {% trans 'Like' %}</button>
          		<button id="btn-unlike-article" class="btn btn-reputation btn-info btn-read"><i class="icon-thumbs-up icon-white"></i> {% trans 'Unlike' %}</button>
          		<button id="btn-hate-article" class="btn btn-reputation btn-read"><i class="icon-thumbs-down"></i> {% trans 'Hate' %}</button>
          		<button id="btn-unhate-article" class="btn btn-reputation btn-info btn-read"><i class="icon-thumbs-down icon-white"></i> {% trans 'Unhate' %}</button>          		
          		<button id="btn-subscribe-article" class="btn btn-subscribe btn-read"><i class="icon-eye-open"></i> {% trans 'Follow' %}</button>
          		<button id="btn-unsubscribe-article" class="btn btn-subscribe btn-info btn-read"><i class="icon-eye-close"></i> {% trans 'Unfollow' %}</button>
          		{% endif %}
          	</div>          
          	{% if user %}
          	<div id="btn-group-edit-article">
	          	<button id="btn-edit-article" class="btn btn-edit btn-read"><i class="icon-edit"></i> {% trans 'Edit' %}</button>
	          	<button id="btn-delete-article" class="btn btn-edit btn-read"><i class="icon-trash"></i> {% trans 'Delete' %}</button>
	          	<button class="btn-post-article btn btn-primary"><i class="icon-pencil icon-white"></i> {% trans 'New Post' %}</button>
          	</div>
          	{% endif %}
          </div>
          <div id="no-article">
			<div class="hero-unit">
			  <h1>{% blocktrans with '<span class="current-name"></span>' as holder %}Nothing in {{ holder }} yet.{% endblocktrans %}</h1>
			  <p>{% trans 'Be a first person' %}</p>
			  <p>
			  	{% if user %}
			    <button class="btn-post-article btn btn-primary btn-large"><i class="icon-pencil icon-white"></i> {% trans 'New Post' %}</button>
			    {% endif %}
			    {% if not user %}
			    <a class="btn btn-primary btn-large login-url" href="{{login_url}}"><i class="icon-arrow-right icon-white"></i> {% trans 'Login to Post' %}</a>
			    {% endif %}
			  </p>
			</div>          
          </div>
          <table id="article-list" class="table table-striped table-bordered table-condensed">
          	<caption class="well"></caption>
			<thead>
	          <tr>
	            <th>{% trans 'Category' %}</th>
	            <th>{% trans 'Title' %}</th>
	            <th>{% trans 'Author' %}</th>
	            <th>{% trans 'Liked' %}</th>
	            <th>{% trans 'Date' %}</th>
	          </tr>
	        </thead>
	        <tbody>
	        </tbody>
          </table>
          <div class="pagination" id="article-pagination-container"><ul id="article-pagination"></ul></div>
        </div><!--/span-->
        
        <div id="home-content" class="container-fluid">
        	<div class="row-fluid">
	            <div id="recent" class="span6">{% trans 'Loading...' %}</div>
	            <div id="external-sns" class="span3">
	                <div class="fb-activity" data-site="350467444992286" data-app-id="350467444992286" data-width="250" data-height="371" data-border-color="#eee" data-header="true" data-recommendations="true"></div>
	                <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
	                <script>
	                new TWTR.Widget({
	                  version: 2,
	                  type: 'search',
	                  search: '@openalive OR from:openalive',
	                  interval: 30000,
	                  title: "",
	                  subject: '',
	                  width: 250,
	                  height: 300,
	                  theme: {
	                    shell: {
	                      background: '#8ec1da',
	                      color: '#ffffff'
	                    },
	                    tweets: {
	                      background: '#ffffff',
	                      color: '#444444',
	                      links: '#1985b5'
	                    }
	                  },
	                  features: {
	                    scrollbar: false,
	                    loop: false,
	                    live: true,
	                    behavior: 'default'
	                  }
	                }).render().start();
	                </script>
	            </div>
            </div>
        </div>        
      </div><!--/row-->
	  {% include '_snippets/post-article.html' %}
      <div id="user-info" class="modal hide fade">
        <div id="user-info-body" class="modal-body"></div>
        <div class="modal-footer">
          <button class="btn" data-dismiss="modal">Close</button>
        </div>
      </div>
      <div id="fb-root"></div>
{% endblock %}


{% block css %}
	{{ block.super }}
    {% css 'css/jquery.tagsinput.css' %}
    {% css 'css/jquery.toastmessage.css' %}
{% endblock %}

{% block jslib %}
    {{ block.super }}
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
	{% js 'js/jquery.tagsinput.min.js' %}
	{% js 'js/jquery.toastmessage.js' %}
	{% js 'js/jquery.history.js' %}
	{% js 'js/jquery.pagination.js' %}
	{% js 'js/jquery.scrollTo-min.js' %}
	{% js 'js/jquery.autoresize.min.js' %}
	{% js 'tiny_mce/jquery.tinymce.js' %}
	{% js 'js/utils.js' %}
	{% js 'js/pretty.js' %}
	{% js 'js/editor.js' %}
	{% js 'js/service.js' %}
	{% js 'js/hash-url.js' %}
	<script type="text/javascript">
	var RECAPTCHA_PUBLIC_KEY = "{{ settings.RECAPTCHA_PUBLIC_KEY }}";
	  window.fbAsyncInit = function() {
	    FB.init({
	      appId      : "{{ settings.FB_APP_ID}}", // App ID
	      channelUrl : "/static/channel.html", // Channel File
	      status     : true, // check login status
	      cookie     : true, // enable cookies to allow the server to access the session
	      xfbml      : true  // parse XFBML
	    });
	
	    // Additional initialization code here
	  };
	  
	  // Load the SDK Asynchronously
	  $(function() {
	    var e = document.createElement("script");
	    e.src = "//connect.facebook.net/en_US/all.js";
	    e.async = true;
	    document.getElementById("fb-root").appendChild(e);
	  });
	
	</script>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
	  {parsetags: 'explicit'}
	</script>	   
{% endblock %}